<template>
	<div class="journal-add-wrap">
		<div class="journal-add">
			<el-form ref="form" :rules="rules" :model="form" label-width="80px">
				<el-row :gutter="20">
					<el-col :span="14">
						<el-form-item label="书籍名称" prop="name">
							<el-input v-model.trim="form.name" maxlength="50" show-word-limit></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="14">
						<el-form-item label="出版时间" prop="pubTime">
							<el-date-picker v-model="form.pubTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="14">
						<el-form-item label="所属年份" prop="year">
							<el-date-picker v-model="form.year" type="year" placeholder="选择年份" value-format="yyyy" style="width: 100%"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="14">
						<el-form-item label="排序" prop="orderBy">
							<el-input-number v-model="form.orderBy" :min="1" :max="1000" size="medium" label="排序"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="14">
						<el-form-item label="整本PDF" prop="orderBy">
							<UploadFile accept=".pdf" @e-fileData="saveFile" :defaultValue="fileList" />
						</el-form-item>
					</el-col>
					<el-col :span="14">
						<el-form-item label="简介">
							<el-input type="textarea" :rows="4" maxlength="100" show-word-limit v-model.trim="form.des"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" v-preventReClick @click="submitForm('form')">提 交</el-button>
		</span>
		<div class="cover-wrap">
			<ImgCropper ref="ImgCropper" :props="defaultProps" v-if="activeName == 1" @e-emit="setCoverImg" />
		</div>
	</div>
</template>
<script>
import moment from 'moment';
export default {
	components: {
		ImgCropper: () => import('@/components/imgCropper'),
		UploadFile: () => import('@/components/uploadFile/index.vue')
	},
	data() {
		return {
			title: '新增',
			coverImgInfo: null,
			form: {
				name: '', //书籍名
				pid: '0', //父级id,顶级 0
				columnId: '', //栏目
				status: '1', //状态;0-未发布（默认），1-发布
				auditStatus: '3', //审核状态;1-暂存，2-审核中，3审核通过，4-审核不通过
				// classifyId: '', //书籍分类
				// clickNum: '0', //浏览次数
				// deleted: '0', //逻辑删除;0-未删除，1-已删除
				des: '', //简介
				editor: '', //主编
				fileId: '', //封面图
				// journalType: '1', //书籍类型；1-日刊，2-周刊，3-月刊
				keyword: '', //关键字
				orderBy: 10,
				pubTime: '', //出版时间
				responsibleDept: '', //主管单位
				sponsorDept: '', //主办单位
				month: '', //所属月份
				year: '', //所属年份
				data: '', //所属年月
				pdfId: '', //整本pdf的附件id
				pdfPath: '' //pdf的路径，如：“/out/business/2023/2/24/1677229805663_5937.jpg
			},
			rules: {
				name: [{ required: true, message: '请输入书籍名称', trigger: 'blur' }],
				pubTime: [{ required: true, message: '请选择出版时间', trigger: 'blur' }],
				year: [{ required: true, message: '请选择所属年份', trigger: 'blur' }]
			},
			tbSysAttachment: null, //返回封面图信息
			defaultProps: {
				defaultValue: null,
				type: 2, //1. 文章封面 2. 书籍封面
				button: ['upload', 'fromNetDisk']
			},
			fileList: [] //返回附件信息
		};
	},
	props: ['curColumn', 'activeName'],
	mounted() {
		this.$bus.$on('columnJournalAdd', this.init);
	},
	beforeDestroy() {
		this.$bus.$off('columnJournalAdd');
	},
	methods: {
		//显示弹窗
		init(row) {
			this.defaultProps.defaultValue = null;
			this.$store.commit('setCurJournal', row || {});
			if (row) {
				this.form = { ...this.form, ...row };
				this.$set(this.form, 'id', row.id);
				this.defaultProps.defaultValue = row.httpUrl;
				let { pdfInfo } = row;
				if (pdfInfo) {
					this.fileList = [pdfInfo];
				}
				// this.form.data = this.form.year + '-' + this.form.month
			} else {
				this.form = this.$options.data().form;
				this.$delete(this.form, 'id');
				// this.form.data = moment().format('YYYY-MM')
				this.form.year = moment().format('YYYY');
				this.form.pubTime = moment().format('YYYY-MM-DD HH:mm:ss');
			}
			this.title = row ? '编辑' : '新增';
			this.$store.commit('changeJournalFlag', false);
		},
		selectFromNetDisk() {
			this.$bus.$emit('selectFile', { showType: 1 });
		},
		saveFile(v) {
			if (v.length) {
				let { id, attrAddr } = v[0];
				this.form.pdfId = id;
				this.form.pdfPath = attrAddr;
			} else {
				this.form.pdfId = '';
				this.form.pdfPath = '';
			}
		},
		setCoverImg(row) {
			let { attrAddr, httpUrl, minAttrAddr, minHttpUrl } = row;
			this.form.fileId = minAttrAddr || attrAddr;
			this.defaultProps.defaultValue = minHttpUrl || httpUrl;
		},
		submitForm(form) {
			this.form.columnId = this.curColumn.id;
			this.$refs[form].validate(async (valid) => {
				if (valid) {
					let dispatchType = this.title == '新增' ? 'addSysJournal' : 'updateSysJournal';
					await this.$store.dispatch(dispatchType, this.form);
					this.successMsg('操作成功');
					this.$bus.$emit('refreshJournalList');
					this.$store.commit('changeJournalFlag', true);
				}
			});
		}
	}
};
</script>
<style scoped lang="scss">
.journal-add-wrap {
	position: relative;
	.cover-wrap {
		position: absolute;
		right: 0;
		top: 0;
	}
}
.journal-add {
	position: relative;
}
</style>
